@charset "utf-8";
@function r($px) {
    @return $px/$fontsize*1rem;
}
@import "../_reset.scss";
$fontsize: 40;

html{
    position: relative;
    overflow: hidden;
    font-size: 0;
}
#web{
    width: 100%;
    height: 100%;
    animation: opens 1s linear;
    font-family: "宋体","微软雅黑";
//  position: relative;
    position: absolute;
    overflow: scroll;
    background-image: url(../../img/set/bg1.png);
    background-size: 100% 100%;
    background-color: #bf0c21;
  } 
  .host{
      font-size: r(30);
      color: #e7c598;
      font-family: "宋体","微软雅黑";
      font-weight: bold;
      text-align: center;
      padding-top: r(27);
  }
  .table{
      width:r(388);
      margin: 0 auto;
  
  .table_Big{
      width: r(217);
      height: r(217);
      margin: 0 auto;
      margin-top: r(34);
      img{
          width: 100%;
          height: 100%;
         
      }
  }
  .sm_table{
      width: r(180);
      height: r(174);
      display: inline-block;
      text-align: center;
      position: relative;
//    margin-top: r(-10);
       span{
           display:inline-block;
//         text-align: center;
            margin: 0 auto;
            width:r(153);
            height: r(174);  
          img{
              width: 100%;
              height: 100%;
             }
          }
          p{
              font-size: r(22);
              color: #BF0C21;
              position: absolute;
              top: r(71);
              left: r(60);
          }
  }

  }
.footer_btn{
        width: r(318);
        height: r(45);
        margin: 0 auto;
        margin-bottom: r(38);
        margin-top: r(15);
        img{
            width: 100%;
            height: 100%;
        }
    }


    
    .footer_img{
        
        width: r(41);
        height: r(41);
        position: fixed;
        right: r(56);
        bottom: r(25);
        font-size: 0;
        img{
            width: 100%;
            height: 100%;
            vertical-align: top;
        }
    }

 #web2{
        width: 100%;
        height: 100%;
        background: rgba(0,0,0,.5);
        background-image: url(../../img/set/share.png);
        background-repeat: no-repeat;
        background-position-x: r(230);
        position: absolute;
        position: relative; 
        transition:all 1s;
        overflow: hidden;
        display: none;
        .dian{
            display: block;
            width: r(50);
            height: r(50);
            background: rgba(0,0,0,.5);
            border-radius: 50%;
            position: absolute;
            right: 0;
            animation:light 2s linear infinite;
        }
        .index_smallWin{
            width: r(413);
            height: r(250);
            background: #e7c598;
            border-radius: r(8);
            left: r(-999);
            right: r(-999);
            margin: 0 auto; 
            position: relative;
            position: absolute;
            top: r(353);
            animation: show 0.4s linear;
       
        >a{
            display: block;
            width: r(35);
            height: r(35);
            position: absolute;
            top: r(10);
            right: r(15);
            >img{
               width: 100%;
               height: 100%;
               vertical-align: top; 
            }
            
        }
        p{
                font-size: r(30);
                color: #BF0C21;
                text-align: center;
                margin-top: r(80);
                line-height: r(45);
            }
        
    }
 }
@keyframes show{
      0%{
          transform: scale(0);
          opacity: 0.3;
      }
     
    
      100%{
          transform: scale(1);
          opacity: 1;
      }
  }
  
  
@keyframes light{
      0%{
          opacity: 0;
      }
       50%{
          opacity: 0.5;
      }
      100%{
          opacity: 0;
      }
  }  
  @keyframes opens{
      0%{
          transform: scale(0) rotate(30deg);
          left: -100%;
          transform-origin: bottom left;
          opacity: 0;
      }
       50%{
           transform: scale(0.5) rotate(15deg);
          left: -50%;
          opacity: 0.5;
      }
      100%{
          transform: scale(1) rotate(0deg);;
         left: 0%;
         opacity: 1;
      }
  }  